<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>CMS-登陆</title>
  <link rel="stylesheet" href="resources/layui/css/layui.css" media="all" />
  <link rel="stylesheet" href="resources/css/login.css" media="all" />
  <style>
    /* 覆盖原框架样式 */
    .layui-elem-quote{background-color: inherit!important;}
    .layui-input, .layui-select, .layui-textarea{background-color: inherit; padding-left: 30px;}
  </style>
</head>
<body>
<div class="layui-row">
  <div class="layui-col-sm12 layui-col-md12">
    <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin">
      <div carousel-item="">
        <div>
          <div class="zyl_login_cont"></div>
        </div>
        <div>
          <img src="img/carousel/01.jpg" />
        </div>
        <div>
          <div class="background">
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
          </div>
        </div>
        <div>
          <img src="img/carousel/03.jpg" />
        </div>
      </div>
    </div>
  </div>
</div>

<div class="zyl_lofo_main">
  <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
    <legend>欢迎登陆-CMS</legend>
  </fieldset>
  <div class="layui-row layui-col-space15">
    <form class="layui-form zyl_pad_01">
      <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-form-item">
          <input type="text" name="username" lay-reqText="请输入账号" value="admin" lay-verify="required" autocomplete="off" placeholder="账号" class="layui-input">
          <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
        </div>
      </div>
      <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-form-item">
          <input type="password" name="password" lay-reqText="请输入密码" value="admin" lay-verify="required" autocomplete="off" placeholder="密码" class="layui-input">
          <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
        </div>
      </div>
      <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-row">
          <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
            <div class="layui-form-item">
              <input type="text" name="checkCode" lay-reqText="请输入验证码"  lay-verify="required" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
              <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
            </div>
          </div>
          <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
            <img  class="zyl_lofo_vercode zylVerCode" src="verCode.do" id="verCodeImg">
          </div>
        </div>
      </div>
      <div class="layui-col-sm12 layui-col-md12">
        <button type="button" id="subBtn"  class="layui-btn layui-btn-fluid" lay-submit lay-filter="subBtnFilter">立即登录</button>
      </div>
    </form>
  </div>
</div>
<script type="text/javascript" src="resources/js/jquery.js"></script>
<script type="text/javascript" src="resources/layui/layui.js"></script>
<script type="text/javascript" src="resources/js/jparticle.min.js"></script>
<script>
  layui.use(['carousel', 'form','layer','jquery'], function(){
    let carousel = layui.carousel;
    let form = layui.form;
    let layer = layui.layer;
    let $ = layui.jquery;
    //验证码点击刷新
    $("#verCodeImg").click(function (){
      $(this).attr("src","verCode.do?"+new Date());
    });


    //表单提交监听事件
    form.on("submit(subBtnFilter)",function (d){
      //获取表单的数据
      let formData = d.field;
      formData.service = "login";//为业务标识赋值
      //使用 ajax 将表单数据进行提交
      $.post("user.do",formData,function (rs){
        //rs 是返回数据
        //rs 表示成功   失败
        if(rs.code != 200){
          //将登录失败的原因进行展示
          layer.msg(rs.msg);
          return false;
        }
        //成功 就跳转到 WEB-INF/view/main.jsp
        location.href = "page.do?service=main";
      })
      return false;//阻止表单的默认提交行为

    })


    //设置轮播主体高度
    var zyl_login_height = $(window).height()/1.3;
    var zyl_car_height = $(".zyl_login_height").css("cssText","height:" + zyl_login_height + "px!important");


    //Login轮播主体
    carousel.render({
      elem: '#zyllogin'//指向容器选择器
      ,width: '100%' //设置容器宽度
      ,height:'zyl_car_height'
      ,anim: 'fade' //切换动画方式
      ,autoplay: false //是否自动切换false true
      ,arrow: 'none' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
      ,indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
    });

    //粒子线条
    $(".zyl_login_cont").jParticle({
      background: "rgba(0,0,0,0)",//背景颜色
      color: "#fff",//粒子和连线的颜色
      particlesNumber:100,//粒子数量
      //disableLinks:true,//禁止粒子间连线
      //disableMouse:true,//禁止粒子间连线(鼠标)
      particle: {
        minSize: 1,//最小粒子
        maxSize: 3,//最大粒子
        speed: 30,//粒子的动画速度
      }
    });

  });

</script>
</body>
</html>
